import { Component } from 'react';
import './InputCom.scss';
class InputCom extends Component {
  state = {
    critic: '',
    content: '',
  };
  // 获取输入的评论人
  getCritic(e) {
    this.setState({
      critic: e.target.value,
    });
  }
  // 获取输入的内容
  getContent(e) {
    this.setState({
      content: e.target.value,
    });
  }
  // 发布评论
  issueCmt() {
    console.log(this);
    // 结构
    const { critic, content } = this.state;
    // 非空验证
    if (!critic || !content) return alert('评论人或内容不可为空');
    this.props.addData({ critic, content });
    // 添加到列表
    this.setState({
      critic: '',
      content: '',
    });
  }
  render() {
    return (
      <>
        <div className="search">
          <input
            value={this.state.critic}
            onChange={(e) => this.getCritic(e)}
            type="text"
            placeholder="请输入评论人"
          />
          <textarea
            value={this.state.content}
            onChange={(e) => this.getContent(e)}
            placeholder="请输入评论内容"
            rows="9"
          ></textarea>
        </div>
        <section className="btn-add">
          <button onClick={() => this.issueCmt()}>发表评论</button>
        </section>{' '}
      </>
    );
  }
}

export default InputCom;
